<!-- Dom模板 -->
<template>
  <div class="Alert">
    <!-- Dom内容 -->
    <div @click="close" class="top">
      <p class="el-icon-arrow-left"></p>
      <p>返回</p>
    </div>
    <div class="cont">
      <ul>
        <li>*姓名：</li>
        <li>*手机号：</li>
        <li>*密码：</li>
        <li>*权限：</li>
      </ul>
      <ul>
        <li><input type="text" placeholder="请输入姓名" v-model="name" /></li>
        <li><input type="text" placeholder="请输入手机号" v-model="user" /></li>
        <li><input type="text" placeholder="请输入手密码" v-model="pass" /></li>
        <li>
          <select v-model="state">
            <option>店员</option>
            <option>管理员</option>
          </select>
        </li>
      </ul>
      <span class="span" v-if="strFlag">{{ str }}</span>
    </div>
    <button
      @click="addUser"
      :disabled="name && user && pass && state ? false : true"
    >
      确定
    </button>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
export default {
  name: "",
  props: ["alertFlag"],
  data() {
    return {
      msg: "测试",
      name: "",
      user: "",
      pass: "",
      state: "",
      navList: [],
      str: "",
      strFlag: false,
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getNavList();
  },
  // Vue方法定义
  methods: {
    getNavList() {
      this.$store.dispatch("role/getNavList", {}).then((res) => {
        this.navList = res;
      });
      console.log(this.navList);
    },
    close() {
      this.$emit("close", !this.alertFlag);
    },
    addUser() {
      let year = new Date().getFullYear();
      let month = new Date().getMonth() + 1;
      let day = new Date().getDate();
      let hours = new Date().getHours();
      let minutes = new Date().getMinutes();
      let tiem = `${year}/${month}/${day} ${hours}:${minutes}`;
      let reg = /^\d{11}$/;
      var mi = /^[a-z0-9]{6,20}$/i;
      let result = this.navList.some((item) => item.user === this.user);
      if (result) {
        this.str = "手机号重复";
        this.strFlag = true;
      } else if (!reg.test(this.user)) {
        this.str = "手机号格式错误";
        this.strFlag = true;
      } else if (!mi.test(this.pass)) {
        this.str = "密码为6~10位字母、数字组合";
        this.strFlag = true;
      } else {
        this.$store.commit("role/setUser", {
          name: this.name,
          user: this.user,
          pass: this.pass,
          state: this.state,
          tiem,
        });
        location.reload();
      }
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
* {
  list-style: none;
}
.Alert {
  width: 100%;
  height: calc(100vh - 100px);
  position: absolute;
  top: 0;
  left: 0%;
  background-color: #eef1f5;
  padding-left: 50px;
  padding-top: 30px;
  animation: A 0.3s linear 1;
  transform: translate(1300px, 0);
  animation-fill-mode: forwards;
  z-index: 999;
}
.el-icon-arrow-left {
  font-size: 20px;
  margin-right: 5px;
  margin-top: 1px;
}
.top {
  display: flex;
  align-items: center;
}
.cont {
  display: flex;
  margin-top: 30px;
  position: relative;
}
.span {
  position: absolute;
  bottom: -10px;
  left: 60px;
  color: red;
}
.cont ul li {
  height: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 25px;
}
.cont ul li input {
  width: 230px;
  height: 30px;
  border: none;
  outline: none;
  padding-left: 10px;
}
.cont ul li select {
  height: 30px;
  border: none;
  outline: none;
  padding-left: 10px;
}
button {
  width: 70px;
  height: 30px;
  background-color: #3ca1ff;
  color: white;
  border: none;
  border-radius: 10px;
  margin-top: 30px;
  margin-left: 55px;
}
button:disabled {
  background-color: gray;
  color: gainsboro;
}
@keyframes A {
  0% {
    transform: translate(1300px, 0);
  }
  50% {
    transform: translate(650px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
</style>